<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript时钟</title>
    <style type="text/css">
      .dot {
        position: absolute;
        display: block;
        background-color: #000;
        border-radius: 100%;
      }
      .red-dot {
        background-color: #fd88ab;
      }
      .number {
        position: absolute;
        display: block;
        text-align: center;
        line-height: 20px;
      }
    </style>
  </head>
  <body></body>
</html>
<script>
  // 中心点坐标
  const centerPosition = {
    x: 400,
    y: 200,
  };
  // 表盘半径
  const r = 180;
  // 秒针半径
  const rSecond = 160;
  // 分针半径
  const rMinute = 120;
  //  时针半径
  const rHour = 80;
  // 画一个元素
  const renderElement = (position, size) => {
    const $ele = document.createElement("div");
    $ele.style.left = position.x - size / 2 + "px";
    $ele.style.top = position.y - size / 2 + "px";
    $ele.style.width = $ele.style.height = size + "px";
    $ele.setAttribute("position", JSON.stringify(position));
    document.body.appendChild($ele);
    return $ele;
  };
  // 画一个点
  const renderDot = (position, className = "") => {
    const dotSize = 4;
    const $dot = renderElement(position, dotSize);
    $dot.className = `dot ${className}`;
  };
  // 画表盘数字
  const renderNumber = (position, number) => {
    const numberSize = 20;
    const $number = renderElement(position, numberSize);
    $number.innerHTML = number;
    $number.className = "number";
  };

  // 根据角度算弧度
  const getRadianByAngle = (angle) => {
    return (angle / 180) * Math.PI;
  };
  // 根据角度和半径求点的坐标
  const getPositionByAngleAndRadius = (angle, radius) => {
    const radian = getRadianByAngle(angle);
    const x = Math.sin(radian) * radius + centerPosition.x;
    const y = centerPosition.y - Math.cos(radian) * radius;
    return { x: Math.round(x), y: Math.round(y) };
  };
  // 获取当前时分秒
  const getCurrentTime = () => {
    const now = new Date();
    return {
      hour: now.getHours(),
      minute: now.getMinutes(),
      second: now.getSeconds(),
    };
  };

  const renderCircle = () => {
    for (let i = 1; i <= 12; i++) {
      const position = getPositionByAngleAndRadius(i * 30, r);
      renderNumber(position, i);
    }
  };
  // 根据角度和半径画时、分、秒针
  const renderTimeLine = (angle, radius, className) => {
    // 一条线由多个点组成，每个点的间隔是20
    const interval = 10;
    for (let i = 1; i < radius / interval; i++) {
      const position = getPositionByAngleAndRadius(angle, i * interval);
      renderDot(position, className);
    }
  };

  const renderTime = () => {
    const time = getCurrentTime();
    // 一分钟60秒，一整圈360度，每秒算6度
    renderTimeLine((time.second * 360) / 60, rSecond, "red-dot");

    // 一小时60秒，一整圈360度，每分钟算6度
    const minute = time.minute + time.second / 60;
    renderTimeLine((minute * 360) / 60, rMinute);

    // 一天24小时，时钟是12小时制，一整圈360度，没小时算30度
    const hour = time.hour + minute / 60;
    renderTimeLine(((hour >= 12 ? hour - 12 : hour) * 360) / 12, rHour);
  };
  // 清除时钟
  const clearClock = () => {
    document.body.innerHTML = "";
  };
  const renderClock = () => {
    // 清除画布
    clearClock();
    // 画中心
    renderDot(centerPosition);
    // 画表盘
    renderCircle();
    //  画时分秒
    renderTime();
  };

  setInterval(renderClock, 1000);
</script>
